<template>
  <div class="container">
    <div class="app-container">
      <!-- 审批头部 -->
      <el-card class="card-approval">
        <div class="approval-top">
          <div class="approval-msg">
            <p>当前审批中</p>
            <span>{{ currApproveCount }}</span>
          </div>
          <div class="approval-msg">
            <p>本月审批通过</p>
            <span>{{ approveCount }}</span>
          </div>
          <div class="approval-msg">
            <p>本月审批驳回</p>
            <span>{{ rejectionCount }}</span>
          </div>
        </div>
      </el-card>
      <!-- 审批列表 -->
      <el-card>
        <el-table :header-cell-style="{fontSize: '14px', backgroundColor: '#F5F6F8',color:'#909399'}" class="approval-list" :data="approvalList" style="width:100%">
          <el-table-column type="selection" />
          <el-table-column label="序号" width="50">
            <template v-slot="{$index}">
              <span>{{ $index+1 }} </span>
            </template>
          </el-table-column>
          <el-table-column sortable label="审批类型">
            <template v-slot="{row}">
              <span v-if="row.processKey==='process_leave'">请假 </span>
              <span v-else-if="row.processKey==='process_overtime'">加班 </span>
              <span v-else>离职 </span>
            </template>
          </el-table-column>
          <el-table-column sortable label="申请人" prop="username" />
          <el-table-column sortable label="当前审批人" prop="procCurrNodeUserName" />
          <el-table-column sortable label="审批发起时间" prop="procApplyTime" />
          <el-table-column sortable label="审批状态">
            <template v-slot="{row}">
              <span v-if="row.processState===0">已提交</span>
              <span v-else-if="row.processState===1">审批中</span>
              <span v-else-if="row.processState===2">审批通过</span>
              <span v-else-if="row.processState===3">审批不通过</span>
              <span v-else>撤销</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{row}">
              <el-button size="mini" type="text" @click="$router.push(`/approval/detail?id=${row.procCurrNodeUserId}`)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="center" align="middle" style="height: 60px;">
          <el-col :span="4">
            <el-pagination
              layout="prev, pager, next"
              :total="total"
            />
          </el-col>
        </el-row>
      </el-card>
    </div>

  </div>
</template>
<script>
import { getApprovalList } from '@/api/approval'
export default {
  name: 'Approvals',
  data() {
    return {
      approvalList: [],
      total: 0,
      currApproveCount: null,
      approveCount: null,
      rejectionCount: null,
      page: 1,
      pagesize: 10
    }
  },
  created() {
    this.getApprovalList()
  },
  methods: {
    async  getApprovalList() {
      const { total, rows, currApproveCount, approveCount, rejectionCount } = await getApprovalList(this.page, this.pagesize)
      this.approvalList = rows
      this.total = total
      this.currApproveCount = currApproveCount
      this.approveCount = approveCount
      this.rejectionCount = rejectionCount
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container{
  padding: 20px;
  margin: 10px;
  background-color: #f5f6f8;
  .card-approval{
    margin-bottom: 10px;
  }
  .approval-top {
  display: flex;
  .approval-msg {
    display: flex;
    font-size: 18px;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-right: 10px;
  }
  }
.approval-list {
  padding: 20px;
    margin-top: 10px;
  }
}

</style>>

